<script setup>
import { ref, defineProps, watch } from "vue";
import utils from "@/common/utils/utils.js";


const emit = defineEmits(['cancel'])

const props = defineProps({
    newStateLoading: {
        type: Boolean,
    },
});
const visible = ref(false);
const showModal = () => {
    visible.value = true;
};
// 关闭抽屉
const closeDrawer = () => {
    visible.value = false
};

const cancel = (e) => {
    closeDrawer()
    emit('cancel')
}

watch(
    () => props.newStateLoading,
    (val) => {
        if (val == true) {
            closeDrawer()
        }
    }
);
defineExpose({
    showModal,
    closeDrawer
});
</script>

<template>
    <div class="">
        <a-modal v-model:visible="visible" width="456px" :closable="false" :keyboard="false" :maskClosable="false"
            style="border-radius: 4px;" :zIndex="1002">
            <div class="content_box">
                <div class="content_img">
                    <img :src="utils.staticPath + 'images/workAi/shotstack/video_template_success.png'" alt="">
                </div>
                <h3 style="margin-bottom: 20px;">音频分离中...</h3>
                <a-spin style="margin-bottom: 20px;" />
                <div class="content_bottom">请耐心等待，正在分离提取音频素材中的文字</div>
            </div>

            <template #footer>
                <div class="footer_box">
                    <a-popconfirm title="确定停止文字素材提取吗?" ok-text="确定" cancel-text="取消" @confirm="cancel">
                        <a-button type="primary">取消</a-button>
                    </a-popconfirm>
                </div>
            </template>
        </a-modal>


    </div>
</template>

<style scoped lang="less">
.content_box {
    width: 100%;
    text-align: center;

    .content_img {
        display: flex;
        justify-content: center;
        margin-bottom: 10px;

        img {
            height: 70%;
            width: 70%;
        }
    }

    .content_bottom {
        font-size: 12px;
        color: #bec0c2;
    }


}
</style>